<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
  <head>
    <title th:text="${report.name}">Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style th:replace="common.html::fonts"></style>
    <link rel="stylesheet" th:href='@{/plugin/css/reports.css}'
          href="../../../../../../common/src/main/resources/static/css/reports.css"/>
               <!--引用css文件 -->
    <link rel="stylesheet" type="text/css" href="../common/css/reports.css">
  </head>
  <body th:with="df=#{ShortDateTimeFormat}" id="top">

    <div th:replace="common.html::reportHeader">Header</div>

    <!-- report options -->
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-12">
          <div class="report__settings">
            <!-- option: interval type of LAST_REVISION -->
            <div th:if="${report.getInterval().name() == 'LAST_REVISION'}">
              <b th:text="#{Interval}">Interval</b>:
              <span th:text="#{LAST_REVISION}">Last Revision</span>
            </div>

            <!-- option: interval type of DAYS -->
            <div th:if="${report.getInterval().name() == 'DAYS'}">
              <b th:text="#{Interval}">Interval</b>:
              <span th:text="${report.getDays()}"/>
              <span th:text="#{DAYS}">Days</span>
            </div>

            <!-- option: interval type of DATE_RANGE -->
            <div th:if="${report.getInterval().name() == 'DATE_RANGE'}">
              <b th:text="#{Interval}">Interval</b>:
              <span th:text="#{DATE_RANGE}">Date Range</span>
            </div>
            <div th:if="${report.getInterval().name() == 'DATE_RANGE'}">
              <b th:text="#{Start}">Start</b>:
              <span th:text="${#temporals.format(report.getStartDate(),df)}">January 12, 2015 9:19:00 AM CST</span>
            </div>
            <div th:if="${report.getInterval().name() == 'DATE_RANGE'}">
              <b th:text="#{End}">End</b>:
              <span th:text="${#temporals.format(report.getEndDate(),df)}">February 12, 2015 9:19:00 AM
                CST</span>
            </div>

          </div>
        </div>
      </div>
    </div>

    <div th:replace="common.html::deviceOrGroupHeader(linkDeviceName=true)"></div>

    <div class="container-fluid" role="main">
      <div class="row">
        <div class="col-xs-12">

          <div th:each="deviceModel : ${deviceModels}" th:id="${device.getId()}"
               th:with="device=${deviceModel.getDevice()}, revision=${deviceModel.getRevision()},
               securityRules=${deviceModel.getSecurityRules()}, 
               networks=${deviceModel.getNetworks()},
               services=${deviceModel.getServices()},
               users=${deviceModel.getUsers()},
               apps=${deviceModel.getApps()}, 
               natRules=${deviceModel.getNatRules()},
               interfaces=${deviceModel.getInterfaces()},
               routes=${deviceModel.getRoutes()}, 
               zones=${deviceModel.getZones()},
               policyMap=${deviceModel.getRulePolicyMap()},
               changeLogs=${deviceModel.getChangeLogs()}">

            <div class="panel panel-default">
              <div class="panel-heading">
                <div class="pull-right"><a href="#top" th:text="#{Top}">Top</a></div>
                <h3 class="panel-title" th:text="${device.getName()}" th:id="|${device.getName()}|" >Device Name</h3>
              </div>
              <div class="panel-body">

                <span th:if="${deviceModel.getError() != null}" th:text="${deviceModel.getError()}">Error.</span>
                <div th:if="${device != null and deviceModel.getTotalChangeCount() gt 0}" class="panel panel-default">
                  <div class="panel-body">
                    <p th:if="${revision == null}">
                      This device does not have any policy revisions.
                    </p>
                    <table class="fixed" th:if="${revision != null}">
                      <thead>
                      <th width="10%">
                        <span th:text="#{SecurityRules}">Security Rules</span>
                      </th>
                      <th width="10%">
                        <span th:text="#{NetworkObjects}">Network Objects</span>
                      </th>
                      <th width="10%">
                        <span th:text="#{ServiceObjects}">Service Objects</span>
                      </th>
                      <th width="10%">
                        <span th:text="#{UserObjects}">User Objects</span>
                      </th>
                      <th width="10%">
                        <span th:text="#{ApplicationObjects}">Application Objects</span>
                      </th>
                      <th width="10%">
                        <span th:text="#{NatRules}">NAT Rules</span>
                      </th>
                      <th width="10%">
                        <span th:text="#{Interfaces}">Interfaces</span>
                      </th>
                      <th width="10%">
                        <span th:text="#{Zones}">Zones</span>
                      </th>
                      <th width="10%">
                        <span th:text="#{Routes}">Routes</span>
                      </th>
                      <th width="10%">
                        <span th:text="#{Changelogs}">Change Logs</span>
                      </th>
                      </thead>
                      <tbody>
                      <td class="text-center">
                        <span th:if="${!includeSecurityRules}" th:text="#{NotSelected}"></span>
                        <div th:if="${includeSecurityRules and securityRules != null}" th:with="size=${securityRules.size()}">
                          <a th:if="${size gt 0}" th:href="|#${device.getId()}securityRules|" th:text="|${#numbers.formatInteger(size,1,'DEFAULT')}|">1,234</a>
                          <span th:if="${size eq 0}">0</span>
                        </div>
                      </td>
                      <td class="text-center">
                        <span th:if="${!includeNetworkObjects}" th:text="#{NotSelected}"></span>
                        <div th:if="${includeNetworkObjects and networks != null}" th:with="size=${networks.size()}">
                          <a th:if="${size gt 0}" th:href="|#${device.getId()}networks|" th:text="|${#numbers.formatInteger(size,1,'DEFAULT')}|">1,234</a>
                          <span th:if="${size eq 0}">0</span>
                        </div>
                      </td>
                      <td class="text-center">
                        <span th:if="${!includeServiceObjects}" th:text="#{NotSelected}"></span>
                        <div th:if="${includeServiceObjects and services != null}" th:with="size=${services.size()}">
                          <a th:if="${size gt 0}" th:href="|#${device.getId()}services|" th:text="|${#numbers.formatInteger(size,1,'DEFAULT')}|">1,234</a>
                          <span th:if="${size eq 0}">0</span>
                        </div>
                      </td>
                      <td class="text-center">
                        <span th:if="${!includeUserObjects}" th:text="#{NotSelected}"></span>
                        <div th:if="${includeUserObjects and users != null}" th:with="size=${users.size()}">
                          <a th:if="${size gt 0}" th:href="|#${device.getId()}users|" th:text="|${#numbers.formatInteger(size,1,'DEFAULT')}|">1,234</a>
                          <span th:if="${size eq 0}">0</span>
                        </div>
                      </td>
                      <td class="text-center">
                        <span th:if="${!includeApplicationObjects}" th:text="#{NotSelected}"></span>
                        <div th:if="${includeApplicationObjects and apps != null}" th:with="size=${apps.size()}">
                          <a th:if="${size gt 0}" th:href="|#${device.getId()}applications|" th:text="|${#numbers.formatInteger(size,1,'DEFAULT')}|">1,234</a>
                          <span th:if="${size eq 0}">0</span>
                        </div>
                      </td>
                      <td class="text-center">
                        <span th:if="${!includeNATRules}" th:text="#{NotSelected}"></span>
                        <div th:if="${includeNATRules and natRules != null}" th:with="size=${natRules.size()}">
                          <a th:if="${size gt 0}" th:href="|#${device.getId()}natRules|" th:text="|${#numbers.formatInteger(size,1,'DEFAULT')}|">1,234</a>
                          <span th:if="${size eq 0}">0</span>
                        </div>
                      </td>
                      <td class="text-center">
                        <span th:if="${!includeInterfaces}" th:text="#{NotSelected}"></span>
                        <div th:if="${includeInterfaces and interfaces != null}" th:with="size=${interfaces.size()}">
                          <a th:if="${size gt 0}" th:href="|#${device.getId()}interfaces|" th:text="|${#numbers.formatInteger(size,1,'DEFAULT')}|">1,234</a>
                          <span th:if="${size eq 0}">0</span>
                        </div>
                      </td>
                      <td class="text-center">
                        <span th:if="${!includeZones}" th:text="#{NotSelected}"></span>
                        <div th:if="${includeZones and zones != null}" th:with="size=${zones.size()}">
                          <a th:if="${size gt 0}" th:href="|#${device.getId()}zones|" th:text="|${#numbers.formatInteger(size,1,'DEFAULT')}|">1,234</a>
                          <span th:if="${size eq 0}">0</span>
                        </div>
                      </td>
                      <td class="text-center">
                        <span th:if="${!includeRoutes}" th:text="#{NotSelected}"></span>
                        <div th:if="${includeRoutes and routes != null}" th:with="size=${routes.size()}">
                          <a th:if="${size gt 0}" th:href="|#${device.getId()}routes|" th:text="|${#numbers.formatInteger(size,1,'DEFAULT')}|">1,234</a>
                          <span th:if="${size eq 0}">0</span>
                        </div>
                      </td>
                      <td class="text-center">
                        <span th:if="${!includeChangeLogs}" th:text="#{NotSelected}"></span>
                        <div th:if="${includeChangeLogs and changeLogs != null}" th:with="size=${changeLogs.size()}">
                          <a th:if="${size gt 0}" th:href="|#${device.getId()}changeLogs|" th:text="|${#numbers.formatInteger(size,1,'DEFAULT')}|">1,234</a>
                          <span th:if="${size eq 0}">0</span>
                        </div>
                      </td>
                      </tbody>
                    </table>
                  </div>
                </div>

                <span th:if="${includeChangeLogs and deviceModel.getError() eq null and deviceModel.getTotalChangeCount() eq 0}" th:text="#{NoChanges}">No changeLogs were found.</span>

                <div th:if="${includeChangeLogs and deviceModel.getTotalChangeCount() gt 0}">
                  <ul class="list-inline">
                    <li>
                      <span class="icon icon--warn modify-blue"></span>
                      <span th:text="#{MODIFY}">Modified</span>
                    </li>
                    <li>
                      <span class="icon icon--plus-circle-closed add-green"></span>
                      <span th:text="#{ADD}">Added</span>
                    </li>
                    <li>
                      <span class="icon icon--minus-circle-closed remove-red"></span>
                      <span th:text="#{REMOVE}">Removed</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            <div th:if="${includeSecurityRules and securityRules != null and securityRules.size() gt 0}"
                 th:id="|${device.getId()}securityRules|"
                 class="panel panel-default">
              <div class="panel-heading">
                <div class="pull-right"><a href="#top" th:text="#{Top}">Top</a></div>
                <h3 class="panel-title"><span th:text="#{NumSecurityRuleChangesForDevice(${device.getName()}, |${#numbers.formatInteger(securityRules.size(),1,'DEFAULT')}|)}">Security Rule Changes for Fortigate 200B:  2,456</span></h3>
              </div>
              <div class="panel-body">
                <table class="no-stripe fixed">
                  <thead>
                    <tr>
                      <th style="width: 35px;"></th>
                      <th><span th:text="#{RuleSummary}">Rule Summary</span></th>
                      <th><span th:text="#{SourceUser}">Source / User</span></th>
                      <th><span th:text="#{Destination}">Destination</span></th>
                      <th><span th:text="#{ApplicationService}">Application / Service</span></th>
                      <th><span th:text="#{Action}">Action</span></th>
                      <th><span th:text="#{Logging}">Logging</span></th>
                      <th><span th:text="#{Comment}">Comment</span></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr th:each="item : ${securityRules}" th:class="${(item.getChangeType() != null) ? item.getChangeType().toString().toLowerCase() : ''}">
                      <td><span th:class="${icons.forObject(item.getChangeType())}"></span></td>
                      <!-- Rule Summary -->
                      <td th:with="subItem=${item.getNumber()}">
                        <div th:if="${policyMap.get(item) != null}">
                          <span class="rule-property-heading">Policy:</span>
                          <span th:text="${policyMap.get(item).getName()}">Policy Name</span>
                        </div>
                        <div>
                          <span class="rule-property-heading">Number:</span>
                          <span th:replace="ChangeReport.html :: changeType (property=${item.getNumber()})"></span>
                        </div>
                        <div th:if="${item.getRuleName().getBefore() != null || item.getRuleName().getAfter() != null}">
                          <span class="rule-property-heading">Name:</span>
                          <span th:replace="ChangeReport.html :: changeType (property=${item.getRuleName()})"></span>
                        </div>
                        <div th:if="${item.getDisabled() != null}">
                          <span th:if="${item.getDisabled().getChangeType().toString() == 'CHANGE'}">
                            <span th:if="${item.getDisabled().getAfter() == 'false'}" class="icon icon--minus-circle-closed remove-red" title="Removed"></span>
                            <span th:if="${item.getDisabled().getAfter() == 'true'}" class="icon icon--plus-circle-closed add-green" title="Added"></span>
                          </span>
                          <span
                                th:if="${(item.getDisabled().getChangeType().toString() == 'SAME' && item.getDisabled().getBefore() == 'true') ||
                                item.getDisabled().getChangeType().toString() == 'CHANGE'}"
                                class="label label-warning" th:text="#{Disabled}">Disabled</span>
                        </div>
                      </td>
                      <!-- Source / User -->
                      <td>
                        <div th:if="${item.getSourceZones() != null && !item.getSourceZones().isEmpty()}">
                          <div class="rule-property-heading">Source Zone</div>
                          <div th:each="subItem : ${item.getSourceZones()}">
                            <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                          </div>
                        </div>
                        <div th:if="${item.getSources() != null && !item.getSources().isEmpty()}">
                          <hr th:if="${item.getSourceZones() != null && !item.getSourceZones().isEmpty()}" class="hr--tight"/>
                          <div class="rule-property-heading">Source</div>
                          <div th:each="subItem : ${item.getSources()}">
                            <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                          </div>
                        </div>
                        <div th:if="${item.getUsers() != null && !item.getUsers().isEmpty()}">
                          <hr
                              th:if="${(item.getSourceZones() != null && !item.getSourceZones().isEmpty()) ||
                              item.getSources() != null && !item.getSources().isEmpty()}"
                              class="hr--tight"/>
                          <div class="rule-property-heading">User</div>
                          <div th:each="subItem : ${item.getUsers()}">
                            <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                          </div>
                        </div>
                      </td>

                      <!-- Destination -->
                      <td>
                        <div th:if="${item.getDestinationZones() != null && !item.getDestinationZones().isEmpty()}">
                          <div class="rule-property-heading">Destination Zone</div>
                          <div th:each="subItem : ${item.getDestinationZones()}">
                            <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                          </div>
                        </div>
                        <div th:if="${item.getDestinations() != null && !item.getDestinations().isEmpty()}">
                          <hr th:if="${item.getDestinationZones() != null && !item.getDestinationZones().isEmpty()}" class="hr--tight"/>
                          <div class="rule-property-heading">Destination</div>
                          <div th:each="subItem : ${item.getDestinations()}">
                            <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                          </div>
                        </div>
                      </td>

                      <!-- Application / Service -->
                      <td>
                        <div th:if="${item.getApps() != null && !item.getApps().isEmpty()}">
                          <div class="rule-property-heading">Application</div>
                          <div th:each="subItem : ${item.getApps()}">
                            <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                          </div>
                        </div>
                        <div th:if="${item.getServices() != null && !item.getServices().isEmpty()}">
                          <hr th:if="${item.getApps() != null && !item.getApps().isEmpty()}" class="hr--tight"/>
                          <div class="rule-property-heading">Service</div>
                          <div th:each="subItem : ${item.getServices()}">
                            <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                          </div>
                        </div>
                      </td>

                      <!-- Action -->
                      <td th:with="subItem=${item.getAction()}">
                        <span th:if="${subItem.getChangeType().toString() == 'CHANGE'}" class="icon icon--warn modify-blue" title="Modified"></span>
                        <span th:class="${actionIcon.forAction(change.currentValue(subItem))}"></span>
                        <span th:text="${#messages.msg(change.currentValue(subItem))}"></span>
                      </td>

                      <!-- Logging -->
                      <td th:with="subItem=${item.getLog()}">
                        <span th:if="${subItem.getChangeType().toString() == 'CHANGE'}" class="icon icon--warn modify-blue" title="Modified"></span>
                        <span th:if="${change.currentValue(subItem) == 'true'}" th:text="#{Enabled}"></span>
                        <span th:if="${change.currentValue(subItem) == 'false'}" th:text="#{Disabled}"></span>
                      </td>

                      <td th:with="subItem=${item.getComment()}">
                        <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                      </td>
                    </tr>

                  </tbody>
                </table>
              </div>
            </div>

            <div th:if="${includeNetworkObjects and networks != null and networks.getTotal() gt 0}"
                 th:id="|${device.getId()}networks|"
                 class="panel panel-default">
              <div class="panel-heading">
                <div class="pull-right"><a href="#top" th:text="#{Top}">Top</a></div>
                <h3 class="panel-title"><span th:text="#{NumNetworkObjectChangesForDevice(${device.getName()}, |${#numbers.formatInteger(networks.size(),1,'DEFAULT')}|)}">Network Object Changes for Fortigate 200B:  2,456</span></h3>
              </div>
              <div class="panel-body">
                <table class="no-stripe fixed">
                  <thead>
                  <tr>
                    <th style="width: 20px;"></th>
                    <th><span th:text="#{NetworkObjectName}">Network Object Name</span></th>
                    <th><span th:text="#{Members}">Members</span></th>
                    <th><span th:text="#{IpAddress}">Address</span></th>
                    <th><span th:text="#{Comments}">Comments</span></th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr th:each="item : ${networks}" th:class="${(item.getChangeType() != null) ? item.getChangeType().toString().toLowerCase() : ''}">
                    <td><span th:class="${icons.forObject(item.getChangeType())}"></span></td>
                    <td th:with="subItem=${item.getName()}">
                      <span th:class="${icons.forNetworkType(change.currentValue(item.getType()))}"></span>
                      <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                    </td>
                    <td>
                      <div th:each="member : ${item.getMembers()}">
                        <span th:class="${icons.forObject(member.getChangeType())}"></span>
                        <span th:class="${icons.forNetworkType(member.getType())}"></span>
                        <span th:replace="ChangeReport.html :: changeType (property=${member})"></span>
                      </div>
                    </td>
                    <td>
                      <div th:each="address : ${item.getAddresses()}">
                        <div th:replace="ChangeReport.html :: changeType (property=${address})"></div>
                      </div>
                    </td>
                    <td th:with="subItem=${item.getComment()}">
                      <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div th:if="${includeServiceObjects and services != null and services.getTotal() gt 0}"
                 th:id="|${device.getId()}services|"
                 class="panel panel-default">
              <div class="panel-heading">
                <div class="pull-right"><a href="#top" th:text="#{Top}">Top</a></div>
                <h3 class="panel-title"><span th:text="#{NumServiceObjectChangesForDevice(${device.getName()}, |${#numbers.formatInteger(services.size(),1,'DEFAULT')}|)}">Service Object Changes for Fortigate 200B:  2,456</span></h3>
              </div>
              <div class="panel-body">
                <table class="no-stripe fixed">
                  <thead>
                  <tr>
                    <th style="width: 20px;"></th>
                    <th><span th:text="#{ServiceObjectName}">Service Object Name</span></th>
                    <th><span>Members</span></th>
                    <th><span th:text="|#{Protocol}/#{Port}|">Protocol/Port</span></th>
                    <th><span th:text="#{Comments}">Comments</span></th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr th:each="item : ${services}" th:class="${(item.getChangeType() != null) ? item.getChangeType().toString().toLowerCase() : ''}">
                    <td><span th:class="${icons.forObject(item.getChangeType())}"></span></td>
                    <td th:with="subItem=${item.getName()}">
                      <span th:class="${icons.forObject(subItem.getChangeType())}"></span>
                      <span th:class="${icons.forServiceType(change.currentValue(item.getType()))}"></span>
                      <span th:text="${change.currentValue(subItem)}"></span>
                    </td>
                    <td>
                      <div th:each="address : ${item.getMembers()}">
                        <div th:replace="ChangeReport.html :: changeType (property=${address})"></div>
                      </div>
                    </td>
                    <td>
                      <div th:each="service : ${item.getServices()}">
                        <div th:replace="ChangeReport.html :: changeType (property=${service})"></div>
                      </div>
                    </td>
                    <td th:with="subItem=${item.getComment()}">
                      <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div th:if="${includeUserObjects and users != null and users.getTotal() gt 0}"
                 th:id="|${device.getId()}users|"
                 class="panel panel-default">
              <div class="panel-heading">
                <div class="pull-right"><a href="#top" th:text="#{Top}">Top</a></div>
                <h3 class="panel-title"><span th:text="#{NumUserObjectChangesForDevice(${device.getName()}, |${#numbers.formatInteger(users.size(),1,'DEFAULT')}|)}">User Object Changes for Fortigate 200B:  2,456</span></h3>
              </div>
              <div class="panel-body">
                <table class="no-stripe fixed">
                  <thead>
                    <tr>
                      <th style="width: 20px;"></th>
                      <th><span th:text="#{UserObjectName}">User Object Name</span></th>
                      <th><span th:text="#{Members}">Members</span></th>
                      <th><span th:text="#{Administrator}">Administrator</span></th>
                      <th><span th:text="#{Comments}">Comments</span></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr th:each="item : ${users}" th:class="${(item.getChangeType() != null) ? item.getChangeType().toString().toLowerCase() : ''}">
                      <td><span th:class="${icons.forObject(item.getChangeType())}"></span></td>
                      <td th:with="subItem=${item.getName()}">
                        <span th:class="${icons.forUserType(change.currentValue(item.getType()))}"></span>
                        <span th:replace="ChangeReport.html :: changeType (property=${subItem})"></span>
                      </td>
                      <td>
                        <div th:each="address : ${item.getMembers()}">
                          <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                        </div>
                      </td>
                      <td th:with="subItem=${item.getAdmin()}">
                        <div th:replace="ChangeReport.html :: booleanChange (property=${subItem})"></div>
                        <span th:fragment="booleanChange (property)">
    <!--/*/  <th:block th:if="${property != null}"> /*/-->
      <span th:class="${icons.forObject(property.getChangeType())}"></span>
      <span th:if="${change.currentValue(property) == 'true'}" th:text="#{Truthy}"></span>
      <span th:if="${change.currentValue(property) == 'false'}" th:text="#{Falsey}"></span>
    <!--/*/ </th:block> /*/-->
  </span>
                      </td>
                      <td th:with="subItem=${item.getComment()}">
                        <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div th:if="${includeApplicationObjects and apps != null and apps.getTotal() gt 0}"
                 th:id="|${device.getId()}apps|"
                 class="panel panel-default">
              <div class="panel-heading">
                <div class="pull-right"><a href="#top" th:text="#{Top}">Top</a></div>
                <h3 class="panel-title"><span th:text="#{NumApplicationObjectChangesForDevice(${device.getName()}, |${#numbers.formatInteger(apps.size(),1,'DEFAULT')}|)}">Security Rule Changes for Fortigate 200B:  2,456</span></h3>
              </div>
              <div class="panel-body">
                <table class="no-stripe fixed">
                  <thead>
                    <tr>
                      <th style="width: 20px;"></th>
                      <th><span th:text="#{Name}">Name</span></th>
                      <th><span th:text="#{Members}">Members</span></th>
                      <th><span th:text="#{DefaultServices}">Default Services</span></th>
                      <th><span th:text="#{RiskLevel}">Risk Level</span></th>
                      <th><span th:text="#{Comments}">Comments</span></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr th:each="item : ${apps}" th:class="${(item.getChangeType() != null) ? item.getChangeType().toString().toLowerCase() : ''}">
                      <td><span th:class="${icons.forObject(item.getChangeType())}"></span></td>
                      <td th:with="subItem=${item.getName()}">
                        <span th:class="${icons.forObject(subItem.getChangeType())}"></span>
                        <span th:class="${icons.forAppType(change.currentValue(item.getType()))}"></span>
                        <span th:text="${change.currentValue(subItem)}"></span>
                      </td>
                      <td>
                        <div th:each="member : ${item.getMembers()}">
                          <div th:replace="ChangeReport.html :: changeType (property=${member})"></div>
                        </div>
                      </td>
                      <td>
                        <div th:each="service : ${item.getDefaultServices()}">
                          <div th:replace="ChangeReport.html :: changeType (property=${service})"></div>
                        </div>
                      </td>
                      <td>
                        <span th:replace="ChangeReport.html :: changeType (property=${item.getRiskLevel()})"></span>
                      </td>
                      <td th:with="subItem=${item.getComment()}">
                        <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div th:if="${includeNATRules and natRules != null and natRules.size() gt 0}"
                 th:id="|${device.getId()}natRules|"
                 class="panel panel-default">
              <div class="panel-heading">
                <div class="pull-right"><a href="#top" th:text="#{Top}">Top</a></div>
                <h3 class="panel-title"><span th:text="#{NumNatRuleChangesForDevice(${device.getName()}, |${#numbers.formatInteger(natRules.size(),1,'DEFAULT')}|)}">NAT Rule Changes for Fortigate 200B:  2,456</span></h3>
              </div>
              <div class="panel-body">
                <table class="no-stripe fixed">
                  <thead>
                  <tr>
                    <th style="width: 20px;"></th>
                    <th><span th:text="#{RuleSummary}">Rule Summary</span></th>
                    <th><span th:text="#{Source}">Source</span></th>
                    <th><span th:text="#{Destination}">Destination</span></th>
                    <th><span th:text="#{Service}">Service</span></th>
                    <th><span th:text="#{TranslatedSrcNatType}">Source NAT Type</span></th>
                    <th><span th:text="#{TranslatedDstNatType}">Destination NAT Type</span></th>
                    <th><span th:text="#{TranslatedSvcNatType}">Service NAT Type</span></th>
                    <th><span th:text="#{Log}">Log</span></th>
                    <th><span th:text="#{Comments}">Comments</span></th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr th:each="item : ${natRules}" th:class="${(item.getChangeType() != null) ? item.getChangeType().toString().toLowerCase() : ''}">
                    <td><span th:class="${icons.forObject(item.getChangeType())}"></span></td>
                    <td>
                      <div>
                        <span class="rule-property-heading">Number:</span>
                        <span th:replace="ChangeReport.html :: changeType (property=${item.getNumber()})"></span>
                      </div>
                      <div th:if="${item.getRuleName().getBefore() != null || item.getRuleName().getAfter() != null}">
                        <span class="rule-property-heading">Name:</span>
                        <span th:replace="ChangeReport.html :: changeType (property=${item.getRuleName()})"></span>
                      </div>
                      <div th:if="${item.getDisabled() != null}">
                          <span th:if="${item.getDisabled().getChangeType().toString() == 'CHANGE'}">
                            <span th:if="${item.getDisabled().getAfter() == 'false'}" class="icon icon--minus-circle-closed remove-red" title="Removed"></span>
                            <span th:if="${item.getDisabled().getAfter() == 'true'}" class="icon icon--plus-circle-closed add-green" title="Added"></span>
                          </span>
                          <span
                                  th:if="${(item.getDisabled().getChangeType().toString() == 'SAME' && item.getDisabled().getBefore() == 'true') ||
                                item.getDisabled().getChangeType().toString() == 'CHANGE'}"
                                  class="label label-warning" th:text="#{Disabled}">Disabled</span>
                      </div>
                    </td>
                    <td>
                      <div th:if="${item.getSources() != null && !item.getSources().isEmpty()}">
                        <div class="rule-property-heading">Source</div>
                        <div th:each="subItem : ${item.getSources()}">
                          <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                        </div>
                      </div>
                      <div th:if="${item.getSourceZones() != null && !item.getSourceZones().isEmpty()}">
                        <hr th:if="${item.getSources() != null && !item.getSources().isEmpty()}" class="hr--tight"/>
                        <div class="rule-property-heading">Source Zone</div>
                        <div th:each="subItem : ${item.getSourceZones()}">
                          <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                        </div>
                      </div>
                      <div th:if="${item.getSourceIntfs() != null && !item.getSourceIntfs().isEmpty()}">
                        <hr th:if="${(item.getSources() != null && !item.getSources().isEmpty()) || (item.getSourceZones() != null && !item.getSourceZones().isEmpty())}" class="hr--tight"/>
                        <div class="rule-property-heading">Source Interface</div>
                        <div th:each="subItem : ${item.getSourceIntfs()}">
                          <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                        </div>
                      </div>
                    </td>
                    <!-- DESTINATIONS -->
                    <td>
                      <div th:if="${item.getDestinations() != null && !item.getDestinations().isEmpty()}">
                        <div class="rule-property-heading">Destination</div>
                        <div th:each="subItem : ${item.getDestinations()}">
                          <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                        </div>
                      </div>
                      <div th:if="${item.getDestinationZones() != null && !item.getDestinationZones().isEmpty()}">
                        <hr th:if="${item.getDestinations() != null && !item.getDestinations().isEmpty()}" class="hr--tight"/>
                        <div class="rule-property-heading">Destination Zone</div>
                        <div th:each="subItem : ${item.getDestinationZones()}">
                          <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                        </div>
                      </div>
                      <div th:if="${item.getDestinationIntfs() != null && !item.getDestinationIntfs().isEmpty()}">
                        <hr th:if="${(item.getDestinations() != null && !item.getDestinations().isEmpty()) || (item.getDestinationZones() != null && !item.getDestinationZones().isEmpty())}" class="hr--tight"/>
                        <div class="rule-property-heading">Destination Interface</div>
                        <div th:each="subItem : ${item.getDestinationIntfs()}">
                          <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                        </div>
                      </div>
                    </td>
                    <!-- SERVICES -->
                    <td>
                      <div th:each="subItem : ${item.getServices()}">
                        <div th:if="${subItem.getBefore() != null}">
                          <span th:if="${subItem.getChangeType().toString() != 'SAME'}" class="icon icon--minus remove-red" title="Removed"></span>
                          <span th:text="${subItem.getBefore()}">Old</span>
                        </div>
                        <div th:if="${subItem.getAfter() != null}">
                          <span class="icon icon--plus-circle-closed add-green" title="Added"></span>
                          <span th:text="${subItem.getAfter()}">New</span>
                        </div>
                      </div>
                    </td>
                    <!-- SRource Translated / NAT Types -->
                    <td>
                      <div th:if="${item.getSrcTranslated() != null && !item.getSrcTranslated().isEmpty()}">
                        <div class="rule-property-heading">Source</div>
                        <div th:each="src : ${item.getSrcTranslated()}">
                          <div th:replace="ChangeReport.html :: changeType (property=${src})"></div>
                        </div>
                      </div>
                      <div th:if="${item.getSrcNatType() != null}">
                        <hr th:if="${item.getSrcTranslated() != null && !item.getSrcTranslated().isEmpty()}" class="hr--tight"/>
                        <div class="rule-property-heading">NAT Type</div>
                        <div th:replace="ChangeReport.html :: changeType (property=${item.getSrcNatType()})"></div>
                      </div>
                    </td>

                    <td>
                      <div th:if="${item.getDstTranslated() != null && !item.getDstTranslated().isEmpty()}">
                        <div class="rule-property-heading">Destination</div>
                        <div th:each="dst : ${item.getDstTranslated()}">
                          <div th:replace="ChangeReport.html :: changeType (property=${dst})"></div>
                        </div>
                      </div>
                      <div th:if="${item.getDstNatType() != null}">
                        <hr th:if="${item.getDstTranslated() != null && !item.getDstTranslated().isEmpty()}" class="hr--tight"/>
                        <div class="rule-property-heading">NAT Type</div>
                        <div th:replace="ChangeReport.html :: changeType (property=${item.getDstNatType()})"></div>
                      </div>
                    </td>

                    <td th:with="subItem=${item.getSvcNatType()}">
                      <div th:if="${item.getSvcTranslated() != null && !item.getSvcTranslated().isEmpty()}">
                        <div class="rule-property-heading">Service</div>
                        <div th:each="svc : ${item.getSvcTranslated()}">
                          <div th:replace="ChangeReport.html :: changeType (property=${svc})"></div>
                        </div>
                      </div>
                      <div th:if="${item.getSvcNatType() != null}">
                        <hr th:if="${item.getSvcTranslated() != null && !item.getSvcTranslated().isEmpty()}" class="hr--tight"/>
                        <div class="rule-property-heading">NAT Type</div>
                        <div th:replace="ChangeReport.html :: changeType (property=${item.getSvcNatType()})"></div>
                      </div>
                    </td>

                    <!-- Logging -->
                    <td th:with="subItem=${item.getLog()}">
                      <span th:if="${subItem.getChangeType().toString() == 'CHANGE'}" class="icon icon--warn modify-blue" title="Modified"></span>
                      <span th:if="${change.currentValue(subItem) == 'true'}" th:text="#{Enabled}"></span>
                      <span th:if="${change.currentValue(subItem) == 'false'}" th:text="#{Disabled}"></span>
                    </td>

                    <td th:with="subItem=${item.getComment()}">
                      <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div th:if="${includeInterfaces and interfaces != null and interfaces.getTotal() gt 0}"
                 th:id="|${device.getId()}interfaces|"
                 class="panel panel-default">
              <div class="panel-heading">
                <div class="pull-right"><a href="#top" th:text="#{Top}">Top</a></div>
                <h3 class="panel-title"><span th:text="#{NumInterfaceChangesForDevice(${device.getName()}, |${#numbers.formatInteger(interfaces.size(),1,'DEFAULT')}|)}">Interface Changes for Fortigate 200B:  2,456</span></h3>
              </div>
              <div class="panel-body">
                <table class="no-stripe fixed">
                  <thead>
                    <tr>
                      <th style="width: 20px;"></th>
                      <th><span th:text="#{InterfaceName}">Interface Name</span></th>
                      <th><span th:text="#{Status}">Status</span></th>
                      <th><span th:text="#{PrimaryAddress}">Priimary Address</span></th>
                      <th><span th:text="#{SecondaryAddresses}">Secondary Addresses</span></th>
                      <th><span>Security Level</span></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr th:each="item : ${interfaces}" th:class="${(item.getChangeType() != null) ? item.getChangeType().toString().toLowerCase() : ''}">
                      <td><span th:class="${icons.forObject(item.getChangeType())}"></span></td>
                      <td th:with="subItem=${item.getHwName()}">
                        <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                      </td>
                      <td th:with="subItem=${item.getInactive()}">
                        <span th:class="${icons.forObject(subItem.getChangeType())}"></span>
                        <span th:if="${change.currentValue(subItem) == 'true'}" th:text="#{Disabled}"></span>
                        <span th:if="${change.currentValue(subItem) == 'false'}" th:text="#{Enabled}"></span>
                      </td>
                      <td th:with="property=${item.getPrimaryAddress()}">
                        <div th:if="${property != null and property.getBefore() != null}">
                          <span th:if="${property.getChangeType().toString() != 'SAME'}" class="icon icon--minus-circle-closed remove-red" title="Removed"></span>
                          <span th:text="${property.getBefore()}">Old Primary Address</span>
                        </div>
                        <div th:if="${property != null and property.getAfter() != null}">
                          <span class="icon icon--plus-circle-closed add-green" title="Added"></span>
                          <span th:class="${icons.forAppType(property.getAfter())}"></span>
                          <span th:text="${property.getAfter()}">New Primary Address</span>
                        </div>
                      </td>
                      <td>
                        <div th:each="address : ${item.getSecondaryAddresses()}">
                          <div th:replace="ChangeReport.html :: changeType (property=${address})"></div>
                        </div>
                      </td>
                      <td th:with="subItem=${item.getSecurityLevel()}">
                        <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div th:if="${includeZones and zones != null and zones.getTotal() gt 0}"
                 th:id="|${device.getId()}zones|"
                 class="panel panel-default">
              <div class="panel-heading">
                <div class="pull-right"><a href="#top" th:text="#{Top}">Top</a></div>
                <h3 class="panel-title"><span th:text="#{NumZoneChangesForDevice(${device.getName()}, |${#numbers.formatInteger(zones.size(),1,'DEFAULT')}|)}">Zone Changes for Fortigate 200B:  2,456</span></h3>
              </div>
              <div class="panel-body">
                <table class="no-stripe fixed">
                  <thead>
                  <tr>
                    <th style="width: 20px;"></th>
                    <th><span th:text="#{ZoneName}">Zone Name</span></th>
                    <th><span th:text="#{Members}">Members</span></th>
                    <th><span th:text="#{Interfaces}">Interfaces</span></th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr th:each="item : ${zones}" th:class="${(item.getChangeType() != null) ? item.getChangeType().toString().toLowerCase() : ''}">
                    <td><span th:class="${icons.forObject(item.getChangeType())}"></span></td>
                    <td th:with="subItem=${item.getName()}">
                      <span th:class="${icons.forObject(subItem.getChangeType())}"></span>
                      <span th:class="${icons.forNetworkType(change.currentValue(item.getType()))}"></span>
                      <span th:text="${change.currentValue(subItem)}"></span>
                    </td>
                    <td>
                      <div th:each="address : ${item.getMembers()}">
                        <div th:replace="ChangeReport.html :: changeType (property=${address})"></div>
                      </div>
                    </td>
                    <td>
                      <div th:each="address : ${item.getInterfaces()}">
                        <div th:replace="ChangeReport.html :: changeType (property=${address})"></div>
                      </div>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div th:if="${includeRoutes and routes != null and routes.getTotal() gt 0}"
                 th:id="|${device.getId()}routes|"
                 class="panel panel-default">
              <div class="panel-heading">
                <div class="pull-right"><a href="#top" th:text="#{Top}">Top</a></div>
                <h3 class="panel-title"><span th:text="#{NumRouteChangesForDevice(${device.getName()}, |${#numbers.formatInteger(routes.size(),1,'DEFAULT')}|)}">Route Changes for Fortigate 200B:  2,456</span></h3>
              </div>
              <div class="panel-body">
                <table class="no-stripe fixed">
                  <thead>
                    <tr>
                      <th style="width: 20px;"></th>
                      <th><span>Destination</span></th>
                      <th><span>Gateway</span></th>
                      <th><span>Interface</span></th>
                      <th><span>Virtual Router</span></th>
                      <th><span>Next Virtual Router</span></th>
                      <th><span th:text="#{Dynamic}">Dynamic</span></th>
                      <th><span th:text="#{DROP}">Drop</span></th>
                      <th><span>Metric</span></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr th:each="item : ${routes}" th:class="${(item.getChangeType() != null) ? item.getChangeType().toString().toLowerCase() : ''}">
                      <td><span th:class="${icons.forObject(item.getChangeType())}"></span></td>
                      <td th:with="subItem=${item.getDestination()}">
                        <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                      </td>
                      <td th:with="subItem=${item.getGateway()}">
                        <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                      </td>
                      <td th:with="subItem=${item.getNdInterface()}">
                        <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                      </td>
                      <td th:with="subItem=${item.getVirtualRouter()}">
                        <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                      </td>
                      <td th:with="subItem=${item.getNextVirtualRouter()}">
                        <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                      </td>
                      <td th:with="subItem=${item.getDynamic()}">
                        <div th:replace="ChangeReport.html :: booleanChange (property=${subItem})"></div>
                      </td>
                      <td th:with="subItem=${item.getDrop()}">
                        <div th:replace="ChangeReport.html :: booleanChange (property=${subItem})"></div>
                      </td>
                      <td th:with="subItem=${item.getMetric()}">
                        <div th:replace="ChangeReport.html :: changeType (property=${subItem})"></div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div th:if="${includeChangeLogs and changeLogs != null and changeLogs.size() gt 0}"
                 th:id="|${device.getId()}changeLogs|"
                 class="panel panel-default">
              <div class="panel-heading">
                <div class="pull-right"><a href="#top" th:text="#{Top}">Top</a></div>
                <h3 class="panel-title"><span>Change Logs for </span><span th:text="${device.getName()}">Device Name</span></h3>
              </div>
              <div class="panel-body">
                <table>
                  <thead>
                    <tr>
                      <th><span th:text="#{Revision}">Revision</span></th>
                      <th><span th:text="#{Action}">Action</span></th>
                      <th><span th:text="#{DateTime}">Date/Time</span></th>
                      <th><span th:text="#{User}">User</span></th>
                      <th><span th:text="#{ObjectType}">Object Type</span></th>
                      <th><span th:text="#{Object}">Object</span></th>
                      <th><span th:text="#{Summary}">Summary</span></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr th:each="change : ${changeLogs}" th:if="${change.getObjectType().name() != 'POLICY_ROUTE'}">
                      <td th:text="${change.getNdConfigRevId()}">49</td>
                      <td th:text="${#messages.msg(change.getAction())}">Add</td>
                      <td th:text="${#temporals.format(change.getChangeDate())}" class="text-nowrap">February 4, 2015 12:36:14 PM CST</td>
                      <td th:text="${change.getChangeUser()}">jthomas</td>
                      <td th:text="${#messages.msg(change.getObjectType())}">Network Object</td>
                      <td th:text="${change.getObjectName()}">192.168.35.2</td>
                      <td th:text="${change.getSummary()}">Added network object</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div th:replace="common.html::footer">Footer</div>

    <span th:fragment="changeType (property)">
      <!--/*/  <th:block th:if="${property != null}"> /*/-->
        <span th:if="${property.getChangeType().toString() == 'SAME'}" th:text="${property.getBefore()}">Old</span>
        <span th:if="${property.getChangeType().toString() == 'REMOVE'}">
          <span class="icon icon--minus-circle-closed remove-red" title="Removed"></span>
          <span th:text="${property.getBefore()}">Old</span>
        </span>
        <span th:if="${property.getChangeType().toString() == 'ADD'}">
          <span class="icon icon--plus-circle-closed add-green" title="Added"></span>
          <span th:text="${property.getAfter()}">New</span>
        </span>
        <span th:if="${property.getChangeType().toString() == 'CHANGE'}">
          <span class="icon icon--warn modify-blue" title="Modified"></span>
          <span th:text="${property.getAfter()}">New</span>
        </span>
        <span th:if="${property.getChangeType().toString() == 'SEMANTIC'}">
          <span class="icon icon--warn modify-blue" title="Semantic"></span>
          <span th:text="${property.getBefore()}">New</span>
        </span>
      <!--/*/ </th:block> /*/-->
    </span>

  <span th:fragment="booleanChange (property)">
    <!--/*/  <th:block th:if="${property != null}"> /*/-->
      <span th:class="${icons.forObject(property.getChangeType())}"></span>
      <span th:if="${change.currentValue(property) == 'true'}" th:text="#{Truthy}"></span>
      <span th:if="${change.currentValue(property) == 'false'}" th:text="#{Falsey}"></span>
    <!--/*/ </th:block> /*/-->
  </span>

  </body>
</html>